import VLink from '@library/vue3/src/link/link.vue'
import type { Meta, StoryObj } from '@storybook/vue3'

const meta: Meta<typeof VLink> = {
  title: '组件/基础/Link',
  tags: ['autodocs']
}

export default meta

type Story = StoryObj<typeof VLink>

export const ControlStory: Story = {
  name: '受控演示',
  render: (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { VLink },
    template: '<v-link v-bind="$props">Link</v-link>'
  }),
  argTypes: {
    type: {
      description: '类型',
      default: 'default',
      control: { type: 'select' },
      options: ['primary', 'success', 'info', 'danger', 'default']
    },
    underline: {
      description: '下划线',
      default: true,
      type: 'boolean'
    },
    disabled: {
      description: '禁用',
      default: false,
      type: 'boolean'
    },
    href: {
      description: '链接',
      default: '',
      type: 'string'
    },
    target: {
      description: '链接打开方式',
      default: '_self',
      control: { type: 'select' },
      options: ['_blank', '_parent', '_self', '_top']
    }
  }
}

export const BasicStory: Story = {
  name: '基础用法',
  render: () => ({
    components: { VLink },
    template: `
      <div>
        <v-link class="mx-1" href="https://element-plus.org" target="_blank">default</v-link>
        <v-link class="mx-1" type="primary">primary</v-link>
        <v-link class="mx-1" type="success">success</v-link>
        <v-link class="mx-1" type="warning">warning</v-link>
        <v-link class="mx-1" type="danger">danger</v-link>
        <v-link class="mx-1" type="info">info</v-link>
      </div>
    `
  })
}

export const DisabledStory: Story = {
  name: '禁用状态',
  render: () => ({
    components: { VLink },
    template: `
      <div>
        <v-link class="mx-1" disabled> default </v-link>
        <v-link class="mx-1" type="primary" disabled>primary</v-link>
        <v-link class="mx-1" type="success" disabled>success</v-link>
        <v-link class="mx-1" type="warning" disabled>warning</v-link>
        <v-link class="mx-1" type="danger" disabled>danger</v-link>
        <v-link class="mx-1" type="info" disabled>info</v-link>
      </div>
    `
  })
}

export const UnderlineStory: Story = {
  name: '下划线',
  render: () => ({
    components: { VLink },
    template: `
      <div>
        <v-link class="mx-1" :underline="false">Without Underline</v-link>
        <v-link class="mx-1">With Underline</v-link>
      </div>
      `
  })
}
